import React from 'react';
import { inject, observer } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Popover, Icon ,Tools} from 'weaver-mobile';
import { TabPage } from 'weaver-mobile-page';
import { renderNoPermission, renderLoading } from '../../public';
import CommentDelete from './CommentDelete';
import Comment from './Comment';
import RouteModal from '../../communication/RouteModal';
const getLabel = Tools.getLabel;

/* 评论监控页面 */
@withRouter
@inject('centerStore')
@observer
export default class CommentMonitor extends React.Component {
  static defaultProps = {
    prefixCls: 'cowork-center-comment',
  }

  componentDidMount() {
    const { centerStore: { commentMonitorStore } } = this.props;
    const {  getCommentList  } = commentMonitorStore;
    getCommentList();
	}
	
	componentWillUnmount() {
    const { centerStore: { commentMonitorStore: { closeAllModel } } } = this.props;
    closeAllModel();
  }

  onSelect = () => {
    const { centerStore: { commentMonitorStore } } = this.props;
    const {  commentpage, setStoreState  } = commentMonitorStore;
    setStoreState({ commentvisible: false });
    if (commentpage === 'undelete') {
      setStoreState({ showCommentCheck: true });
    }
  }

  render(){
    const {  prefixCls,centerStore: { commentMonitorStore } } = this.props;
    const {  setStoreState, commentvisible, commentpage,viewRight,commentLoading  } = commentMonitorStore;
    const tabBtn = [
      commentpage === 'undelete' &&
      <Popover 
        mask
        visible={commentvisible}
        overlay={[<Popover.Item>{getLabel(-81455,"批量操作")}</Popover.Item>]}
        onSelect={this.onSelect}
        onVisibleChange={commentvisible => setStoreState({ commentvisible })}
      >
        <Icon key='ellipsis' type='ellipsis' />
      </Popover>
    ];
    
    const tabs = [
      { key: 'undelete', title: getLabel(21269, '未删除') },
      { key: 'delete', title: getLabel(18967, '已删除') },
    ];
    const tabProps = {
      onChange: (tab) => { setStoreState({ commentpage: tab.key }) },
      page: commentpage,
    };

    return  commentLoading ? renderLoading : (
      <div style={{ height: '100%' }}>
      {viewRight === 0 && renderNoPermission }
      {viewRight === 1 &&
      <div className={prefixCls}>
        <TabPage
          tabs={tabs}
          btns={tabBtn}
          tabProps={tabProps}
        />
        {commentpage === 'undelete' && <Comment/>}
        {commentpage === 'delete' && <CommentDelete/>}
        </div>
      }
      <RouteModal/>
      </div>
    );
  }
}